<template>
  <div class="login">
    <Bar></Bar>
    <div class="user-login">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        hide-required-asterisk
      >
        <div class="phone-number">
          <el-form-item
            label="手机号码"
            prop="phoneNumber"
            style="padding-top: 40px"
          >
            <el-input
              placeholder="注册时填写的手机号"
              v-model="ruleForm.phoneNumber"
            ></el-input>
          </el-form-item>
        </div>
        <div class="password">
          <el-form-item
            label="登录密码"
            prop="password"
            style="padding-top: 40px"
          >
            <el-input
              placeholder="请输入密码"
              v-model="ruleForm.password"
              show-password
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item
          label=""
          prop="type"
          label-width="0"
          style="padding-top: 30px"
        >
          <el-checkbox
            label="三天内自动登录"
            name="type"
            v-model="ruleForm.type"
          ></el-checkbox>
          <el-link href="#" target="_blank" :underline="false" style="margin-left: 185px"
            >忘记密码?</el-link
          >
        </el-form-item>
        <el-form-item label-width="0" style="margin-top: 20px">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item
          label=""
          prop="type"
          label-width="0"
          style="margin: 5px 0 40px 0"
        >
          <el-link href="#" type="primary" :underline="false"
            >海外用户登录</el-link
          >
          <router-link to="/registered" target="_blank">
          <el-link type="primary" :underline="false" style="margin-left: 230px">注册账户</el-link>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Bar from '../../components/bar'
export default {
  components: {
    Bar
  },
  data () {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      ruleForm: {
        phoneNumber: '',
        password: '',
        type: true
      },

      rules: {
        phoneNumber: [
          { validator: checkPhone, trigger: 'change' }
        ],
        password: [
          { required: true, message: '密码没有填写', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  min-height: 100vh;
  .user-login {
    width: 350px;
    margin: 50px auto 40px;
    padding: 25px 50px;
    color: #333;
    font-size: 14px;
    .phone-number,
    .password {
      border-bottom: 1px solid #e5e5e5;
    }
    .el-form-item {
      margin-bottom: 1px;
    }
    /deep/.el-checkbox__label {
      font-size: 12px;
      color: #333;
    }
    /deep/.el-form-item__label {
      font-weight: bold;
      font-size: 14px;
      text-align: left;
      color: #333;
    }
    /deep/.el-input__inner {
      border: 0;
      height: 30px;
      padding: 0;
    }
    .el-link {
      font-size: 12px;
    }
    .el-button {
      font-size: 12px;
      width: 100%;
      height: 45px;
      border-radius: 2px;
    }
  }
}
</style>